\<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>咪咕视频“体育” 22001010528 王雪伊</title>
    <link rel="stylesheet" href="wang_css/tiyu.css">
    <link rel="stylesheet" href="./wang_css/swiper-bundle.min.css">
    <script src="./wang_fonts/iconfont.js"></script>
   
</head>
<body>
    <body>
        <header class="wang_header">
            <nav>
                <ul class="header">
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-G"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <form action="" method="post">
                            <p>
                                <input placeholder="异形：夺命舰">
                            </p>
                        </form>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wodehongbao"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shizhong"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="dropdown">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gengduo"></use>
                        </svg>
                        <div class="dropdown-content">
                            <a href="#">投屏</a>
                            <a href="#">影院兑换</a>
                            <a href="#">扫一扫</a>
                        </div>
                    </li>
                </ul>
            </nav>
            <nav>
                <ul class="header2">
                    <li class="nav-tab"><a href="#selected" class="nav-link">精选</a></li>
                    <li class="nav-tab"><a href="#saicheng" class="nav-link">赛程</a></li>
                    <li class="nav-tab"><a href="#yingchao" class="nav-link">英超</a></li>
                    <li class="nav-tab"><a href="#nba" class="nav-link">NBA</a></li>
                    <li class="nav-tab"><a href="#cba" class="nav-link">CBA</a></li>
                    <li class="nav-tab"><a href="#xijia" class="nav-link">西甲</a></li>
                    <li class="nav-tab"><a href="#dejia" class="nav-link">德甲</a></li>
                </ul>
            </nav>
        </header>
        <nav class="wang_nav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-migushipin-copy"></use>
                        </svg>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tiyu-copy"></use>
                        </svg>
                        <p>体育</p>
                    </a>
                </li>
                <li>
                    <a href="./vip.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-VIP2"></use>
                        </svg>
                        <p>VIP</p>
                    </a>
                </li>
                <li>
                    <a href="./duanshipin.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yishu_duanshipin"></use>
                        </svg>
                        <p>短视频</p>
                    </a>
                </li>
                <li>
                    <a href="./wode.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode1"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
        <main class="wang_main">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide"><img src="wang_img/体育1.png" ><div class="txt">短道速滑正在直播中···</div></div>
                      <div class="swiper-slide"><img src="wang_img/体育2.png" ><div class="txt">“莎头”2023年合体出战成都混合世界杯</div></div>
                      <div class="swiper-slide"><img src="wang_img/体育3.png" ><div class="txt">单板滑雪正在直播··</div></div>
                    </div>
                  <script src="./wang_js/swiper-bundle.min.js"></script>
<div class="container">
    <!-- 第一个图标和文字 -->
    <div class="item">
        <img src="wang_img/英超.png">
        <p>英超</p>
    </div>
    
    <!-- 第二个图标和文字 -->
    <div class="item">
        <img src="wang_img/NBA2.png">
        <p>NBA</p>
    </div>
    
    <!-- 第三个图标和文字 -->
    <div class="item">
        <img src="wang_img/CBA2.png">
        <p>CBA</p>
    </div>
    
    <!-- 第四个图标和文字 -->
    <div class="item">
        <img src="wang_img/西甲.png">
        <p>西甲</p>
    </div>
    
    <!-- 第五个图标和文字 -->
    <div class="item">
        <img src="wang_img/德甲.png">
        <p>德甲</p>
    </div>
</div>
    <div class="title2">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-rili"></use>
        </svg>
        <p>精选赛事</p>
        <a href="#">全部赛程</a> 
    </div>
    
    <div class="wang_container">
        <div class="wang_schedule">
            <div class="time">明天00:00</div>
            <div class="league">亚冠精英联赛阶段第6轮</div>
            <div class="teams">
                <img src="wang_img/吉达.png" alt="吉达国民" class="team-logo">
                <div class="team-name">吉达国民</div>
                <vs>VS</vs>
                <img src="wang_img/黑.png" alt="德黑兰独立" class="team-logo">
                <div class="team-name">德黑兰独立</div>
            </div>
            <button class="reserve-button">预约</button>
        </div>
        <div class="wang_schedule">
            <div class="time">明天02:00</div>
            <div class="league">亚冠精英联赛阶段第6轮</div>
            <div class="teams">
                <img src="wang_img/利雅得.png" alt="利雅得" class="team-logo">
                <div class="team-name">利雅得胜利</div>
                <vs>VS</vs>
                <img src="wang_img/萨德.png" alt="萨德" class="team-logo">
                <div class="team-name">萨德</div>
            </div>
            <button class="reserve-button">预约</button>
        </div>
        <div class="wang_schedule">
          <div class="time">明天00:00</div>
          <div class="league">亚冠精英联赛阶段第6轮</div>
          <div class="teams">
              <img src="wang_img/德甲.png" alt="吉达国民" class="team-logo">
              <div class="team-name">吉达国民</div>
              <vs>VS</vs>
              <img src="wang_img/英超.png" alt="德黑兰独立" class="team-logo">
              <div class="team-name">德黑兰独立</div>
          </div>
          <button class="reserve-button">预约</button>
      </div>
      <div class="wang_schedule">
        <div class="time">明天00:00</div>
        <div class="league">亚冠精英联赛阶段第6轮</div>
        <div class="teams">
            <img src="wang_img/德甲.png" alt="吉达国民" class="team-logo">
            <div class="team-name">吉达国民</div>
            <vs>VS</vs>
            <img src="wang_img/英超.png" alt="德黑兰独立" class="team-logo">
            <div class="team-name">德黑兰独立</div>
        </div>
        <button class="reserve-button">预约</button>
    </div>
    </div>

    <div class="title2">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-chunjiedianshi"></use>
        </svg>
        <p>Top赛事聚焦</p>
        <a href="#">二台陪你一起看</a> 
    </div>
</body>
</main>
<!-- json解析 -->
<ul class="wang_list"></ul>
<script>
    const url=`http://rap2api.taobao.org/app/mock/321624/tiyu`
    const wang_list=document.querySelector('.wang_list');
    //使用fetch获得url，并加入到tiyu_list中
    fetch(url)
    .then(response => response.json())
   .then(data => {
     data.forEach(item => {
       const li = document.createElement('li');
       li.innerHTML = `
         <a href="${item.link}">
           <img src="${item.image}" alt="${item.title}">
           <h3>${item.title}</h3>
           <p>${item.content}</p>
         </a>
       `;
       wang_list.appendChild(li);
     });
   })
.catch(error => console.error('Error fetching data:', error)); // 添加错误处理
</script>
</body>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
  
    });
  </script>
</body>
</script>
</html>

</html>

    </script>
</html>
<!-- [
  {
    "image": "./wang_img/111.png",
    "link": "https://example.com/news1",
    "title": "正播速滑世界杯",
    "content": "韩梅出战女子3000米"
  },
  {
    "image": "./wang_img/222.png",
    "link": "https://example.com/news2",
    "title": "正播单板滑雪大跳台",
    "content": "葛春宇出战 苏翊鸣晋级决赛"
  }
] -->